<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气预报的登录与注册</title>
    <style>
body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-image: linear-gradient(120deg, #a1c4fd, #0c5070);
        }
        .container {
            position: relative;
            display: flex;
            /* 视域 */
            perspective: 1200px;
            transform-style: preserve-3d;
        }
        .div-description {
            width: 300px;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: #fff;
            border-radius: 5px 0 0 5px;
            transform: translateZ(-1px);
        }
        .div-description:nth-last-child(1) {
            border-radius: 0 5px 5px 0;
        }
        .div-description img {
            width: 75%;
            margin-bottom: 15px;
        }
        .div-description span {
            font-size: 12px;
            color: #555;
        }

        .div-form {
            width: 300px;
            height: 400px;
            position: absolute;
            left: 0;
            transition: .5s;
            transform-origin: right;
        }
        .div-form .form-login {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            background-image: linear-gradient(to right, #48c6ef 0%, #6f86d6 200%);
            border-radius: 5px 0 0 5px;
        }
        .div-form .form-register {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            background-image: linear-gradient(to right, #48c6ef -100%, #6f86d6 100%);
            border-radius: 0 5px 5px 0;
            transform: rotateY(180deg);
        }
        .div-form form.disappear {
            display: none;
        }

        .div-form h1 {
            margin: 50px 0 25px 0;
            /* 大写 */
            text-transform: uppercase;
            color: #fff;
            letter-spacing: 5px;
        }
        .div-form input {
            background-color: transparent;
            width: 70%;
            color: #fff;
            outline: none;
            border: none;
            border-bottom: 2px solid rgba(255, 255, 255, 0.7);
            padding: 5px 0;
            margin: 8px 0;
            text-indent: 5px;
            font-size: 14px;
            letter-spacing: 1px;
        }
        .div-form input::placeholder {
            color: #fff;
        }
        .div-form button[type="submit"] {
            width: 100%;
            height: 32px;
            margin: 30px auto 10px;
            font-size: 14px;
            color: #fff;
            border: none;
            border-radius: 16px;
            background-color: rgba(255, 255, 255, 0.2);
            transition: .4s;
        }
        .div-form button[type="submit"]:hover {
            letter-spacing: 3px;
            background-color: #fff;
            color: #000;
        }

        .div-form .control {
            color: #fff;
            margin: 5px;
            font-size: 13px;
        }
        .div-form .control a {
            color: #fff;
            margin: 0 5px;
            letter-spacing: 1px;
        }
        .div-form .control a:hover {
            color: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="div-description">
            <img src="zsw.jpg" alt=""><span>知天气，更知你我~</span>
            <span> 登录或完成注册即代表你同意用户协议</span>
        </div>
        <div class="div-form">
            <form action="" class="form-login">
                <h1>登录</h1>
                <input required name="usersname"id="us"type="text" placeholder="帐号">
                
                <input autocomplete="on"maxlength="10 "oninput="value=value.replace(/\s+/g,'')" type="password"id="ps" placeholder="密码(十位)">
                
                    <input type="checkbox">记住密码
                <div class="button">
                    <button onclick="dl()" type="submit">Login</button>
                    <script>
                        var wuwei=localStorage.getItem("username");
                        var mima=localStorage.getItem("password");
                       function dl(){
                        
                    var us=document.getElementById('us');
                    var usvalue=us.value;
                    var ps=document.getElementById('ps');
                    var psvalue=ps.value;
                    if(usvalue==""){
                        alert('请先输入账号')
                        
                    }
                    if(psvalue==""){
                        alert('请先输入密码')
                    return;    
                    }
                 if( usvalue!=wuwei && psvalue!=mima){
                
                alert("此用户未注册");
            }
            else if(usvalue==wuwei && psvalue!=mima){
                
                alert("密码错误");
            }
                
                    else{
                    window.location.href = "data.html";
                    window.event.returnValue=false;
                    
                        }
                    }
                    </script>
                </a></div>
                <div class="control">
                    <span>没有帐号？<a href="#">Register</a></span>
                </div>
            </form>
            <form action="" class="form-register disappear">
                <h1>注册</h1>
                <input name="number" id="number"type="text" placeholder="手机号">
                <span class="msg"></span><script>
                const number=document.querySelector('[name=number]')
                number.addEventListener('change',verifyName)
                function verifyName(){
                    const span=number.nextElementSibling
                    const reg=/^[0-9-_]{11}$/
                    if(!reg.test(number.value)){
                        span.innerText="请输入正确的手机号"
                        return false;
                    } 
                    span.innerText=" ";
                    return true;}
                    </script>
                <div>
                    <input name="code" id="code"type="text"placeholder="短信验证码">
                    <a class="code" herf="js">获取</a>
                </div>
            <script>
                const code=document.querySelector('.code');
                code.addEventListener('click',function(){
                    let i=6;
                    let timeId=setInterval(function(){
                        i--;
                        code.innerHTML=i+'秒后得'
                        if(i==0){
                            clearInterval(timeId)
                            code.innerHTML='重新获取'
                        }
                    },1000)
                })
            </script>
                <input name="username"id="username"type="text" placeholder="账号(六到十位)">
                <span class="msg"></span><script>
                const username=document.querySelector('[name=username]')
                username.addEventListener('change',verifyName)
                function verifyName(){
                    const span=username.nextElementSibling
                    const reg=/^[a-zA-z0-9-_]{6,10}$/
                    if(!reg.test(username.value)){
                        span.innerText="输入不合法,六到十位"
                        return false;
                    } 
                    span.innerText=" ";
                    return true;
                }</script>

                <input autocomplete="on"maxlength="10 "oninput="value=value.replace(/\s+/g,'')" type="password" id="password"placeholder="密码">
                
                <button  onclick="zc()" type="submit">Register</button>
                <div id="msge" style="display:none;color: greenyellow;"></div>
                <script>function zc(){
                    var numberelement=document.getElementById('number');
                    var nvalue=numberelement.value;
                    var c=document.getElementById('code');
                    var cvalue=c.value;
                    var u=document.getElementById('username');
                    var uvalue=u.value;
                    var p=document.getElementById('password');
                    var pvalue=p.value;
                    if(nvalue==""){
                        msge.style.display="block";
                        msge.innerText="手机号不得为空";
                        return;
                    }
                    if(cvalue==""){
                        msge.style.display="block";
                        msge.innerText="验证码不得为空";
                        return;
                    }
                    if(uvalue==""){
                        msge.style.display="block";
                        msge.innerText="名字不得为空";
                        return;
                    }
                    if(pvalue==""){
                        msge.style.display="block";
                        msge.innerText="密码不得为空";
                        return;
                    }
                    localStorage.setItem("username",uvalue);
                    localStorage.setItem("password",pvalue);
                    alert('注册成功')
                }</script>
                <div class="control">
                    <span>已有帐号？<a href="#">Login</a></span>
                </div>
            </form>
        </div>
        
        <div class="div-description">
            <img src="zsw2.jpg" alt=""><span>知天气，更知你我~</span>
            <span> 未注册过的手机号，我们将自动帮你注册账号 </span>
            
        </div>
    </div>

    <script>
        var btn = document.querySelectorAll('.control a')
        var formContainer = document.querySelector('.div-form')
        var form = document.querySelectorAll('.div-form form')

        // 切换注册
        btn[0].addEventListener('click', function(e) {
            form[0].classList.add('disappear')
            form[1].classList.remove('disappear')
            formContainer.style.transform = 'rotateY(180deg)'
        })
        // 切换登录
        btn[1].addEventListener('click', function(e) {
            form[1].classList.add('disappear')
            form[0].classList.remove('disappear')
            formContainer.style.transform = 'none'
        })
      
    </script>
    <script>
        const usersname=document.querySelector('[name=usersname]')
        localStorage.setItem('name',usersname.value);
         
    </script>
</body>  
</html>